<template>
  <div class="app-container">
    <el-row>
      <el-col :span="22">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="100px">
          <el-form-item label="起止时间" prop="date">
            <el-date-picker
              v-model="queryParams.date"
              type="monthrange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="2" style="text-align: right">
        <el-button type="primary" icon="el-icon-download" size="mini" >导出</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :lg="8" v-for="charts in echartList">
        <echarts-common :title="charts.title">
          <component :is="charts.chart" :chartData="charts.data" :unit="charts.unit" :title="charts.title" />
        </echarts-common>
      </el-col>
    </el-row>
  </div>

</template>

<script>
import { getAssetCount, getAssetLocation, getAssetStatus, getAssetType, getAssetOwnership, getAssetBookValue, getAssetRentTrend, getAssetChangeType, getAssetIdleTop5 } from "@/api/statistics/assets";
import echartsCommon from "./echartsCommon.vue";
import LineChart from './echarts/LineChart'
import RaddarChart from './echarts/RaddarChart'
import PieChart from './echarts/PieChart'
import PieChart1 from './echarts/PieChart1'
import PieChart2 from './echarts/PieChart2'
import BarChart from './echarts/BarChart'
import BarChartL from './echarts/BarChartL.vue';
import moment from "moment/moment";
export default {
  name: 'assets',
  components: {
    echartsCommon,
    LineChart,
    RaddarChart,
    PieChart,
    PieChart1,
    PieChart2,
    BarChart,
    BarChartL
  },
  data() {
    return {
      queryParams: {
        date: []
      },
      echartList: [
        {
          title: '资产总数',
          chart: BarChart,
          unit: '个',
          data: {
            xAxisData: [],
            yAxisData: []
          },
        },
        {
          title: '所在位置',
          chart: BarChart,
          unit: '个',
          data: {
            // 修改 x 轴数据为沈阳市各行政区名称
            xAxisData: [],
            // 生成小于 10 的随机 y 轴数据
            yAxisData: []
          },
        },
        {
          title: '资产状态',
          chart: PieChart1,
          unit: '个',
          data: []
        },
        {
          title: '类型比例',
          chart: PieChart2,
          unit: '个',
          data: []
        },
        {
          title: '产权归属',
          chart: BarChartL,
          data: {
            xAxisData: [],
            yAxisData: []
          },
        },
        {
          title: '账面原值',
          chart: BarChart,
          unit: '元',
          data: {
            xAxisData: [],
            yAxisData: []
          },
        },
        {
          title: '出租趋势',
          chart: LineChart,
          unit: '个',
          data: {
            xAxisData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
            yAxisData: [120, 200, 80, 180, 220, 150, 240]
          },
        },
        {
          title: '变更类型',
          chart: RaddarChart,
          data: {
            xAxisData: [],
            yAxisData: []
          },
        },
        {
          title: '闲置资产TOP5',
          chart: BarChartL,
          unit: '㎡',
          data: {
            xAxisData: [],
            yAxisData: []
          },
        },
      ]
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    handleQuery() {
      let params = {}
      if(this.queryParams.date && this.queryParams.date.length > 0) {
        params.startDate = moment(this.queryParams.date[0]).startOf('month').format('YYYY-MM-DD HH:mm:ss')
        params.endDate = moment(this.queryParams.date[1]).endOf('month').format('YYYY-MM-DD HH:mm:ss')
      } else {
        params.startDate = ''
        params.endDate = ''
      }
      this.getData(params)
    },
    resetQuery() {
      this.$refs.queryForm.resetFields()
      this.handleQuery();
    },
    getData(params) {
      getAssetCount(params).then(res => {
        if(res.data && res.data.length > 0) {
          let x = [];
          let y = [];
          res.data.forEach(item => {
            x.push(item.commonMonth)
            y.push(Number(item.commonNum))
          })
          this.echartList[0].data.xAxisData = x
          this.echartList[0].data.yAxisData = y
        }
      })
      getAssetLocation(params).then(res => {
        if(res.data && res.data.length > 0) {
          let x = [];
          let y = [];
          res.data.forEach(item => {
            x.push(item.commonContent)
            y.push(Number(item.commonNum))
          })
          this.echartList[1].data.xAxisData = x
          this.echartList[1].data.yAxisData = y
        }
      })
      getAssetStatus(params).then(res => {
        if(res.data && res.data.length > 0) {
          let data = res.data.map(item => {
            return {
              value: Number(item.commonNum),
              name: item.commonStatus
            }
          })
          this.echartList[2].data = data
        }
      })
      getAssetType(params).then(res => {
        if(res.data && res.data.length > 0) {
          let data = res.data.map(item => {
            return {
              value: Number(item.commonNum),
              name: item.commonStatus
            }
          })
          this.echartList[3].data = data
        }
      })
      getAssetOwnership(params).then(res => {
        if(res.data && res.data.length > 0) {
          let x = [];
          let y = [];
          res.data.forEach(item => {
            x.push(item.commonContent)
            y.push(Number(item.commonNum))
          })
          this.echartList[4].data.xAxisData = x
          this.echartList[4].data.yAxisData = y
        }
      })
      getAssetBookValue(params).then(res => {
        if(res.data && res.data.length > 0) {
          let x = [];
          let y = [];
          res.data.forEach(item => {
            x.push(item.commonMonth)
            y.push(Number(item.commonContent))
          })
          this.echartList[5].data.xAxisData = x
          this.echartList[5].data.yAxisData = y
        }
      })
      getAssetRentTrend(params).then(res => {
        if(res.data && res.data.length > 0) {
          let x = [];
          let y = [];
          res.data.forEach(item => {
            x.push(item.commonMonth)
            y.push(Number(item.commonNum))
          })
          this.echartList[6].data.xAxisData = x
          this.echartList[6].data.yAxisData = y
        }
      })
      getAssetChangeType(params).then(res => {

        if(res.data && res.data.length > 0) {
          let x = [];
          let y = [];
          res.data.forEach(item => {
            x.push(item.commonStatus)
            y.push(Number(item.commonNum))
          })
          this.echartList[7].data.xAxisData = x
          this.echartList[7].data.yAxisData = y
        }
      })
      getAssetIdleTop5(params).then(res => {
        if(res.data && res.data.length > 0) {
          let x = [];
          let y = [];
          res.data.forEach(item => {
            x.push(item.assetAddress)
            y.push(Number(item.assetArea))
          })
          this.echartList[8].data.xAxisData = x
          this.echartList[8].data.yAxisData = y
        }
      })
    },

  }
}
</script>

<style scoped lang="scss">

</style>
